@import "../layout";
@import "../components/import-mod-statusBar";
@import "../components/import-mod-servicingBar.scss";
@import "../components/import-mod-maintenanceIndex.scss";

article{
  overflow: auto;
}
// statusBar
.statusBar {
  .statusBar__table {
    tr {
      td:nth-child(1) {
        width:0.9rem;
        font-size: $font-small;
        background: #fff;
      }
      &:nth-child(1) {
        td:nth-child(odd) {
          color: $color-black;
        }
        td:nth-child(even) {
          color: $color-red;
        }
      }
      &:nth-child(2) {
        td:nth-child(even) {
          color: $color-red;
        }
      }
      span {
        display: block;
        width: 100%;
        height: 100%;
        background: $color-red;
        color: $color-white;
      }
    }
  }
}

// servicingBar
.servicingBar{
  .servicingBar__button{
    width:4.7rem;
    margin:0 auto;
    .tag{
      display: inline-block;
      text-align: center;
      width:1.9rem;
      height:0.8rem;
      line-height: 0.8rem;
      font-size: $font-small;
      border:1px solid $color-border;
      border-radius: 0.2rem;
      &:nth-child(1){
        margin-right:0.6rem;
        margin-bottom: 0.2rem;
      }
    }
  }
}

// maintenanceIndex
.maintenanceIndex{
  .maintenanceIndex__button{
    width:7.2rem;
    margin:0 auto;
    .tag{
        display: inline-block;
        text-align: center;
        width:1.9rem;
        height:0.8rem;
        line-height: 0.8rem;
        font-size: $font-small;
        border:1px solid $color-border;
        border-radius: 0.2rem;
        margin-right:0.6rem;
        &:last-child{
          margin-right:0;
          margin-bottom: 0.2rem;
        }
    }
  }
}
